<template>
  <view class="comlplaint">
    <!-- 头部 -->
    <view class="top-top">
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <image src="../../static/resort/need/block_close.png" class="close" @click="toChatMessage()"></image>
        </view>
      </view>
    </view>
    <view style="height: 175rpx;"></view>
    <!-- 头部 -->
    <!-- 内容 -->
    <view class="content">
      <view class="con-tit">选择投诉该账号的原因：</view>
      <view class="white-con">
        <view class="chat-records" @click="toTwo()">
          <view class="char-left">
            发布不当内容对我造成骚扰
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
        <view class="chat-records" @click="toOne()">
          <view class="char-left">
            存在欺诈骗钱行为
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
        <view class="chat-records">
          <view class="char-left">
            此账号可能被盗用了
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
        <view class="chat-records">
          <view class="char-left">
            存在侵权行为
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
        <view class="chat-records">
          <view class="char-left">
            发布虚假信息
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
        <view class="chat-records">
          <view class="char-left">
            其他
          </view>
          <view class="chat-right">
            <image src="../../static/message/more.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="con-tit2" @click="toComplaintNotice()">投诉须知</view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      toTwo() {
        uni.navigateTo({
          url: '/pages/message/complaintTwo'
        })
      },
      toOne() {
        uni.navigateTo({
          url: '/pages/message/complaintOne'
        })
      },
      toComplaintNotice() {
        uni.navigateTo({
          url: "/pages/message/complaintNotice"
        })
      },
      toChatMessage() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .comlplaint {

    // 头部
    .top-top {
      width: 100vw;
      z-index: 99;
      position: fixed;
      top: 0;

      .topbox {
        width: 90vw;
        margin: auto;

        .top-oneitem {
          width: 100%;
          height: var(--status-bar-height);
        }

        .top-twoitem {
          height: 100rpx;
          width: 100%;
          display: flex;
          align-items: center;

          .close {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }

    // 内容
    .content {
      .con-tit {
        width: 90vw;
        margin: 0 auto;
        color: #989898;
      }

      .white-con {
        background-color: #fff;
        margin-top: 20rpx;

        .chat-records {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30rpx 5vw;
          border-bottom: 1px solid #F5F5F5;

          .char-left {
            font-size: 36rpx;
          }

          .chat-right {
            image {
              width: 25rpx;
              height: 40rpx;
              vertical-align: middle;
            }
          }
        }

        .chat-records:last-child {
          border-bottom: none;
        }
      }

      .con-tit2 {
        text-align: center;
        color: #0297FA;
        font-size: 36rpx;
        margin-top: 40rpx;
      }
    }
  }
</style>